import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    WebView,
    TouchableHighlight,
    Alert
} from 'react-native';

export default class About extends Component {
    constructor(props) {
        super(props);
        this.state = {
            src: 'http://www.oschina.net/'
        };
    }

    goQQ=()=> {
        this.setState({
            src:'http://www.qq.com/'
        });
    }
    goOSC=()=> {
        this.setState({
            src:'http://www.oschina.net/'
        });
    }
    goBack=()=> {
        this.refs.webview.goBack();
    }
    goForward=()=>{
        this.refs.webview.goForward();
    }
    reload=()=> {
        this.refs.webview.reload();
    }
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <View style={[styles.left]}>
                        <TouchableHighlight
                            onPress={()=>this.goOSC()}
                        >
                            <Text style={[styles.text]}>OSChina</Text>
                        </TouchableHighlight>
                    </View>
                    <View style={[styles.left]}>
                        <TouchableHighlight
                            onPress={()=>this.goQQ()}
                        >
                            <Text style={[styles.text]}>腾讯图片</Text>
                        </TouchableHighlight>
                    </View>
                </View>
                <View style={styles.subHeader}>
                    <TouchableHighlight
                        onPress={()=>this.goBack()}
                    >
                        <Text style={[styles.text]}>后退</Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        onPress={()=>this.reload()}
                    >
                        <Text style={[styles.text]}>刷新</Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        onPress={()=>this.goForward()}
                    >
                        <Text style={[styles.text]}>前进</Text>
                    </TouchableHighlight>
                </View>
                <WebView
                    ref="webview"
                    source={{uri:this.state.src}}
                    startInLoadingState={true}
                    renderLoading={()=><Text>正在加载页面...</Text>}
                />
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    header:{
        flexDirection:'row',
        justifyContent:'space-between',
        height:60,
        backgroundColor:'green',
    },
    subHeader:{
        flexDirection:'row',
        justifyContent:'space-between',
        height:60,
        backgroundColor:'yellow',
    },
    text: {
        color: '#333333',
        marginBottom: 5,
        backgroundColor:'#00ced1',
        fontSize: 25,
        textAlign:'center',
    },
    left:{
        justifyContent:'center',
        alignItems:'center'
    },
    right:{
        justifyContent:'center',
        alignItems:'center'
    }
});
